<template>
	<view class="userCenter">
		<u-navbar title="我的" :leftIcon="null" bgColor="transparent" :border="false" :placeholder="true"></u-navbar>
		<view class="user">
			<button :disabled="isLogin" class="login" open-type="getPhoneNumber" @getphonenumber="getPhonenumber">
				<view v-if="isLogin">
					<u-avatar :src="avatar" size="45"></u-avatar>
				</view>
				<view v-else>
					<u-avatar :src="'/static/mine/mor.png'" size="45"></u-avatar>
				</view>
			</button>
			<view class="userName">
				<view class="name">{{ isLogin ? userData.nickName : '未登录' }}</view>
				<!-- <view class="text">凭信用0押金就可以租手机</view> -->
				<view class="text">{{ isLogin ? '凭信用0押金就可以租手机' : '点击头像登录' }}</view>
			</view>
		</view>
		<view class="gird">
			<view class="girdtitle">
				<view class="girdtitle_left">
					<text>我的订单</text>
				</view>
				<view class="girdtitle_right" @click="gopage('allOrder', 0)">
					查看全部
					<u-icon class="icon" size="12" name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="girdContent">
				<view class="girdContenti" v-for="(item, index) in girdContentArr1" :key="index" @click="gopage('allOrder', item.status)">
					<view class="image">
						<image :src="item.image" style="width: 50rpx; height: 50rpx" mode=""></image>
					</view>
					<text>{{ item.text }}</text>
				</view>
			</view>
		</view>
		<view class="cell-group">
			<view class="cell-item" v-for="(item, index) in girdContentArr" :key="index" @click="gopage(item.url, item.status)">
				<view class="left">
					<image :src="item.image" style="width: 48rpx; height: 48rpx" alt="icon" class="icon"></image>
					<view class="title">{{ item.text }}</view>
				</view>
				<u-icon name="arrow-right" size="20"></u-icon>
			</view>
		</view>

		<!-- 	<view @click="login" class="login">点我登录</view>
		<view @click="getInfo" class="login">点我获取用户信息</view> -->
	</view>
</template>

<script>
import api from '../api/index.js';
import main from '../api/main.js';
import myApi from '../api/my';
export default {
	data() {
		return {
			userData: {},
			isLogin: false,
			isShowLoding: true,
			avatar: '',
			girdContentArr: [
				{
					image: '../static/userCenter/Frame(21).png',
					text: '我的收藏',
					url: 'collect'
				},
				{
					image: '/static/userCenter/Frame(22).png',
					text: '隐私服务',
					url: 'agreement'
				},
				{
					image: '/static/userCenter/Frame(23).png',
					text: '收货地址',
					url: 'address'
				},
				// {
				// 	image: '/static/userCenter/Frame(24).png',
				// 	text: '关于我们',
				// 	url: 'AboutUs'
				// },
				{
					image: '/static/userCenter/Frame(25).png',
					text: '实名认证',
					url: 'realName'
				},
				{
					image: '/static/userCenter/Frame(26).png',
					text: '退出登录',
					url: 'logout'
				}
			],
			girdContentArr1: [
				{
					image: '/static/userCenter/Frame(15).png',
					text: '待下单',
					status: 1
				},
				{
					image: '/static/userCenter/Frame(16).png',
					text: '待发货',
					status: 2
				},
				{
					image: '/static/userCenter/Frame(17).png',
					text: '待收货',
					status: 3
				},
				{
					image: '/static/userCenter/Frame(18).png',
					text: '租用中',
					status: 4
				},
				{
					image: '/static/userCenter/Frame(18).png',
					text: '已逾期',
					status: 9
				},
				{
					image: '/static/userCenter/Frame(18).png',
					text: '退款售后',
					status: 11
				}
				// {
				//   image: "/static/userCenter/Frame(19).png",
				//   text: "待归还",
				//   url: "realName",
				//   status: 5,
				// },
				// {
				//   image: "/static/userCenter/Frame(20).png",
				//   text: "归还中",
				//   url: "realName",
				//   status: 6,
				// },
				// {
				//   image: "/static/userCenter/Frame(45).png",
				//   text: "已完成",
				//   url: "realName",
				//   status: 7,
				// },
				// {
				//   image: "/static/userCenter/Frame(46).png",
				//   text: "已取消",
				//   url: "realName",
				//   status: 8,
				// },
			]
		};
	},
	async onLoad() {
		await this.getUserInfo();
		// 判断用户是否登录
		this.isLogin = uni.getStorageSync('token') ? true : false;
	},
	onShow() {
		this.getUserInfo();
		uni.getStorageSync('user') ? (this.avatar = uni.getStorageSync('user').avatar) : '';
		this.isLogin = uni.getStorageSync('token') ? true : false;
	},
	methods: {
		async getUserInfo() {
			//获取用户信息
			const data = {};
			const res = await main.getUserInfo();
			if (res.code == 401) {
				uni.showToast({
					title: '请登录',
					icon: 'none'
				});
				this.isLogin = false;
			}
			this.userData = res.user;
			this.avatar = res.user.avatar;
			this.$refs.avatar;
			console.log(res)
			uni.setStorageSync('user', res.user);
		},
		onGetAuthorize(e) {
			console.log(e);
		},
		gopage(type, status) {
			if (uni.getStorageSync('token')) {
				if (type == 'logout') {
					myApi.logout().then((res) => {
						// console.log("res----", res);
						if (res.code == 200) {
							uni.removeStorageSync('token');
							uni.removeStorageSync('user');
							uni.showToast({
								title: '退出成功',
								icon: 'none',
								mask: true
							});
							this.isLogin = false;
							this.userData = {};
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/index'
								});
							}, 1500);
						}
					});
				} else {
					uni.navigateTo({
						url: '/subPages/mine/' + type + (status >= 0 ? '?status=' + status : '')
					});
				}
			} else {
				uni.showToast({
					title: '请登录',
					icon: 'none'
				});
				return;
			}
		},
		// 登录(获取用户手机号)
		getPhonenumber(e) {
			if (this.isShowLoding) {
				uni.showLoading({
					title: '登录中...',
					mask: true
				});
			}

			//   console.log("e----", e);
			if (e.detail.errMsg == 'getPhoneNumber:ok') {
				console.log('授权成功');
				const data = {
					response: e.detail.encryptedData,
					sign: e.detail.sign
				};
				my.getAuthCode({
					scopes: 'auth_user',
					success: (authRes) => {
						console.log('authRes----', authRes);
						// 请求用户信息接口
						if (authRes.authCode) {
							const parentId = uni.getStorageSync('parentId');
							myApi
								.Login({
									response: JSON.stringify(data),
									code: authRes.authCode,
									parentId: parentId
								})
								.then((res) => {
									uni.hideLoading();
									uni.setStorageSync('token', res.token);
									this.isLogin = true;
									this.getUserInfo();
								});
							this.isShowLoding = false;
						}
					}
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.login {
	background: none;
	border: none;
	outline: none;
}

.login::after {
	background: none;
	border: none;
	outline: none;
}

.userCenter {
	width: 100%;
	height: 100vh;
	padding: 30rpx;
	box-sizing: border-box;
	background-color: #f8f9ff;
	color: #333;

	.user {
		width: 100%;
		height: 158rpx;
		display: flex;
		align-items: center;

		.userName {
			margin-left: 15rpx;

			.name {
				color: #333;
				font-size: 32rpx;
			}

			.text {
				color: #777;
				font-size: 24rpx;
			}
		}
	}

	.gird {
		border-radius: 15rpx;
		width: 100%;
		padding: 25rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 15rpx;

		.girdtitle {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			height: 90rpx;

			.girdtitle_left {
				display: flex;
				align-items: center;
				font-size: 30rpx;
			}

			.girdtitle_right {
				font-weight: 400;
				font-size: 24rpx;
				display: flex;
				align-items: center;
			}

			.icon {
				margin: 0 5rpx;
			}
		}

		.girdContent {
			width: 100%;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 15px;

			.girdContenti {
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: center;
				height: 94rpx;
				font-size: 26rpx;
			}
		}
	}

	.cell-item {
		width: 100%;
		background-color: #fff;
		border-radius: 15rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 20rpx 0;
		padding: 25rpx;
		box-sizing: border-box;

		.left {
			display: flex;
			align-items: center;
			font-size: 28rpx;

			image {
				margin-right: 15rpx;
			}
		}
	}
}
</style>
